<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/aui/aui.css" />
		<style type="text/css">
			/* 人 */
			.moon {
				position: absolute;
				top: 0;
				right: 0;
			}
			.container {
				height: 0;
				width: 100%;
			}
			.person {
				position: absolute;
				height: 75px;
				width: 0;
				color: #fff;
				left: 150px;
				top: 100px;
				transform-origin: 50% 50% 0px;
				-webkit-transform-origin: 50% 50% 0px;
				animation: sprint 2s infinite ease-in;
				-webkit-animation: sprint 2s infinite ease-in;
			}
			.person .head:before {
				content: "";
				position: absolute;
				top: 0px;
				left: -6px;
				height: 2.7px;
				width: 42px;
				border-radius: 20%;
				border: 4px solid #1d9dd5;
				background-color: #1d9dd5;
				transform-origin: 50% 100% 0px;
				-webkit-transform-origin: 50% 100% 0px;
				z-index: 90;
			}
			.person .head {
				position: absolute;
				top: -30px;
				left: -6px;
				height: 30px;
				width: 30px;
				border-radius: 50%;
				border: 4px solid #1d9dd5;
				transform-origin: 50% 100% 0px;
				-webkit-transform-origin: 50% 100% 0px;
				z-index: 90;
				animation: bob 2s infinite alternate;
				-webkit-animation: bob 2s infinite alternate;
			}
			.person .head:after {
				content: "";
				position: absolute;
				top: -12px;
				left: 9px;
				height: 12px;
				width: 15px;
				border-radius: 30%;
				border: 4px solid #1d9dd5;
				background-color: #1d9dd5;
				z-index: 90;
			}
			.person .torso {
				position: absolute;
				height: 60px;
				width: 0;
				border-left: 2px solid #1d9dd5;
				left: 0px;
				top: 15px;
				z-index: 90;
			}
			.person .part {
				position: absolute;
				left: 0;
				top: 75px;
				z-index: 90;
			}
			.person .part.arm {
				position: absolute;
				border-left: 3px solid #1d9dd5;
				border-bottom: 3px solid #1d9dd5;
				height: 45px;
				width: 39px;
				top: 15px;
				right: 300px;
				transform-origin: 0% 0% 0px;
				-webkit-transform-origin: 0% 0% 0px;
				animation: pump 1s infinite ease-in-out;
				-webkit-animation: pump 1s infinite ease-in-out;
			}
			.person .part.arm.one {
				transform: rotate3d(0, 0, 1, -90deg);
				-webkit-transform: rotate3d(0, 0, 1, -90deg);
			}
			.person .part.arm.two {
				transform: rotate3d(0, 0, 1, -90deg);
				-webkit-transform: rotate3d(0, 0, 1, -90deg);
				animation-delay: .5s;
				-webkit-animation-delay: .5s;
			}
			.person .part.leg {
				height: 57px;
				width: 60px;
				border-right: 3px solid #1d9dd5;
				border-top: 3px solid #1d9dd5;
				animation: run 1s infinite ease-in;
				-webkit-animation: run 1s infinite ease-in;
				transform-origin: 0% 0% 0px;
				-webkit-transform-origin: 0% 0% 0px;
			}
			.person .part.leg.one {
				transform: rotate3d(0, 0, 1, 90deg);
				-webkit-transform: rotate3d(0, 0, 1, 90deg);
			}
			.person .part.leg.two {
				transform: rotate3d(0, 0, 1, 80deg);
				-webkit-transform: rotate3d(0, 0, 1, 80deg);
				animation-delay: .5s;
				-webkit-animation-delay: .5s;
			}
			.person .part .foot {
				position: absolute;
				top: 90px;
				left: 0;
				width: 3px;
				height: 3px;
				background-color: #ffffff;
				z-index: 900;
				border: 3px solid red;
			}
			@-webkit-keyframes run {
			0% {
			transform: rotate3d(0, 0, 1, -5deg);
			-webkit-transform: rotate3d(0, 0, 1, -5deg);
			}
			50% {
			transform: rotate3d(0, 0, 1, 150deg);
			-webkit-transform: rotate3d(0, 0, 1, 150deg);
			}
			100% {
			transform: rotate3d(0, 0, 1, -5deg);
			-webkit-transform: rotate3d(0, 0, 1, -5deg);
			}
			}
			@-webkit-keyframes bob {
			0% {
			transform: rotate3d(0, 0, 1, 5deg);
			-webkit-transform: rotate3d(0, 0, 1, 5deg);
			}
			25% {
			transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
			-webkit-transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
			}
			50% {
			transform: rotate3d(0, 0, 1, 5deg);
			-webkit-transform: rotate3d(0, 0, 1, 5deg);
			}
			75% {
			transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
			-webkit-transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
			}
			100% {
			transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
			-webkit-transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
			}
			}
			@-webkit-keyframes pump {
			0% {
			transform: rotate3d(0, 0, 1, 80deg);
			-webkit-transform: rotate3d(0, 0, 1, 80deg);
			}
			50% {
			transform: rotate3d(0, 0, 1, -70deg);
			-webkit-transform: rotate3d(0, 0, 1, -70deg);
			}
			100% {
			transform: rotate3d(0, 0, 1, 80deg);
			-webkit-transform: rotate3d(0, 0, 1, 80deg);
			}
			}
			@-webkit-keyframes spin {
			0% {
			transform: rotate3d(0, 0, 1, -180deg);
			-webkit-transform: rotate3d(0, 0, 1, -180deg);
			}
			25% {
			transform: rotate3d(0, 0, 1, -100deg);
			-webkit-transform: rotate3d(0, 0, 1, -100deg);
			}
			75% {
			transform: rotate3d(0, 0, 1, 100deg);
			-webkit-transform: rotate3d(0, 0, 1, 100deg);
			}
			100% {
			transform: rotate3d(0, 0, 1, 180deg);
			-webkit-transform: rotate3d(0, 0, 1, 180deg);
			}
			}
			@-webkit-keyframes sprint {
			0% {
			transform-origin: 50% 50% 0px;
			-webkit-transform-origin: 50% 50% 0px;
			transform: translate(-500px, 0px);
			-webkit-transform: translate(-500px, 0px);
			}
			100% {
			transform: translate(0px, 0px);
			-webkit-transform: translate(0px, 0px);
			transform-origin: 50% 50% 0px;
			-webkit-transform-origin: 50% 50% 0px;
			transform: translate(500px, 0px);
			-webkit-transform: translate(500px, 0px);
			}
			}
			/* */
		</style>
	</head>
	<body>
		<div style="text-align:center;clear:both;"></div>
		<div class='moon'></div>
		<div class='container'>
			<div class='person'>
				<div class='head'></div>
				<div class='part arm one'></div>
				<div class='part arm two'></div>
				<div class='torso'></div>
				<div class='part leg one'></div>
				<div class='part foot one'></div>
				<div class='part leg two'></div>
				<div class='part foot two'></div>
			</div>
		</div>
		<p class="aui-padded-10">
			也许你停了一会，但，就在这一会，命运改变了！
		</p>
		<p class="aui-padded-10" style="text-align: right;">
			—— 新生帝
		</p>
	</body>
	<script type="text/javascript" src="../../script/AHelper.js"></script>
	<script type="text/javascript" src="../../script/zepto.min.js"></script>
	<script type="text/javascript"></script>
</html>